<template>
  <div class="feedback-form">
    <div class="text-wrap">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="" prop="value">
          <a-input
            v-model="form.value"
            type="textarea"
            :placeholder="$t('all.autotext330')"
            show-limit
            suffix="RMB"
            :maxLength="1000"
            :auto-size="{ minRows: 8, maxRows: 10 }"
          >
          </a-input>
          <span class="words-number">{{ wordsNumber }}/1000</span>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-row>
      <a-col :span="24" align="right">
        <a-button
          type="primary"
          @click="onSubmit"
          :loading="loading"
          :disabled="submitDisabled"
        >
          {{ $t('all.autotext827') }}
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { apiAddFeedback } from '@api/feedback/feedback'

export default {
  name: 'feedback-form',
  props: {
    proId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      form: {
        value: ''
      },
      rules: {
        value: [{ required: true, message: this.$t('all.autotext223'), trigger: 'change' }]
      },
      loading: false,
      closeModalTimer: null
    }
  },
  computed: {
    wordsNumber () {
      return this.form.value.trim().length
    },
    submitDisabled () {
      return this.form.value.trim().length === 0
    }
  },
  methods: {
    getValue () {
      return this.form.value
    },
    // 提交反馈
    onSubmit () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            await apiAddFeedback({
              proId: this.proId,
              content: this.form.value.trim()
            })
            this.closeInfoAfter3S()
            this.$info({
              title: this.$t('all.autotext730'),
              icon: () => '',
              content: this.$t('all.autotext252'),
              okText: this.$t('all.autotext792'),
              closable: true,
              onOk: () => {
                this.form.value = ''
                clearTimeout(this.closeModalTimer)
              },
              onCancel: () => {
                this.form.value = ''
                clearTimeout(this.closeModalTimer)
              }
            })
          } finally {
            this.loading = false
          }
        }
      })
    },
    closeInfoAfter3S () {
      this.closeModalTimer = setTimeout(() => {
        this.form.value = ''
        this.$destroyAll()
      }, 3000)
    }
  }
}
</script>

<style scoped lang='less'>
.feedback-form {
  padding: 25px 10px 100px;
  .text-wrap {
    position: relative;
    .words-number {
      position: absolute;
      bottom: -12px;
      right: 8px;
      font-size: 12px;
      color: #999;
    }
  }
}

</style>
